<template>
	<div class="group_item">
		<div class="group_item_header" v-if="!isShowAll">
			<a href="javascript:;" @click="headerGetSourceNewsHandle">
				<div class="group_item_header_img on">
					<i class="icon my" slot="home"></i>
				</div>
				<div class="group_item_header_title">
					<h1>{{item.typeId && item.typeId === '10003' ? 'AD' : item.source.title || item.fromtitle}}</h1>
					<p>{{item.type}}</p>
				</div>
			</a>
			<!--a href="javascript:;" @click="itemClickHandle">
				{{item.typeId === '10003' ? 'AD' : item.fromtitle}}
			</a-->
			<a href="javascript:;" @click="dislogShowHandle" :data-index="index">
				<i class="icon more"></i>
			</a>
		</div>
		<div class="group_item_main">
			<div class="group_item_main_medias">
				<div class="group_item_main_media" v-if="item.imgs && item.imgs.length>0">
					<GroupsImgs :len="length" :item="item" :screenWidth="screenWidth" :index="index" @setGroupsImgsDian="setGroupsImgsDian" @setFeedsDataIsGoods="setFeedsDataIsGoods" :ref="'groupimgs'+index"></GroupsImgs>
				</div>
				<div class="group_item_main_media" v-if="item.imgs && item.imgs.length<=0">
					<GroupsVideo :item="item" :index="index"></GroupsVideo>
				</div>
			</div>
			<!--div class="group_item_main_comment">
				<b class="group_item_main_comment_playscount" v-if="item.bigimgs.length<=0">{{item.plays.length}} 次播放</b>
				<a href="javascript:;" v-else>
					<b class="group_item_main_comment_goodscount">{{item.goods.length}} 次点赞</b>
				</a>
			</div-->
			<div class="group_item_main_desc">
				<a href="javascript:;" @click="itemClickHandle" v-if="!isShowAll && item.typeId && item.typeId !== '10003'">
					<h1 class="group_item_main_desc_title"><i>看：</i>{{title}}</h1>
					<p :class="'desc '+' desc_'+index"><i>说：</i>{{item.description !== 'null' ? isShowAll ? description : description.substr(0, 120)+"..." : isShowAll ? title : title+'...'}}</p>
				</a>
				<a :href="item.link" v-if="item.typeId && item.typeId === '10003'">
					<p :class="'desc'+' desc_'+index"><i>说：</i>{{item.description !== 'null' ? isShowAll ? description : description.substr(0, 120)+"..." : isShowAll ? title : title+'...'}}</p>
				</a>
				<div class="group_item_main_desc_content" :href="item.link" v-if="isShowAll && item.typeId && item.typeId !== '10003'">
					<h1 class="group_item_main_desc_allshow_title" v-if="isShowAll" :style="{fontSize:((fontSize+5)/23.44)+'rem',lineHeight:((fontSize+15)/23.44)+'rem'}">{{title}}</h1>
					<div class="group_item_main_fontsize">
						<div class="group_item_main_fontsize_item"><label>{{pubDate}}</label></div>
						<div class="group_item_main_fontsize_item">
							<label>字体大小</label>
							<a href="javascript:;" @click="fontSizeAddHandle">+</a>
							<a href="javascript:;" @click="fontSizeDelHandle">-</a>
						</div>
					</div>
					<p :class="'desc show_all '+' desc_'+index" :style="{fontSize:(fontSize/23.44)+'rem',lineHeight:((fontSize+10)/23.44)+'rem',height:(moreContentButton ? (375/23.44)+'rem' : 'auto')}"><i>文：</i>{{item.description !== 'null' ? description : title}}</p>
					<a href="javascript:;" v-if="moreContentButton" class="show_all" @click="moreContentButtonClickHandle">点击查看全文</a>
					<p class="group_item_main_desc_content_aside">
						<span>来源：{{item.source.title || item.fromtitle}}</span>
						<span>阅读量({{countProps}})</span>
					</p>
				</div>
				<p class="pubdate" v-if="!isShowAll && item.typeId && item.typeId !== '10003'">
					<span>{{pubDate}}</span>
					<span>阅读量({{countProps}})</span>
				</p>
				<p class="links">
					<a :href="item.link" class="group_item_main_desc_fy" target="_blank" v-if="isShowAll">查看原文</a>
					<a href="javascript:;" @click="itemClickHandle" class="group_item_main_desc_fy" target="_blank" v-if="!isShowAll">查看新闻</a>
					<a href="javascript:;" v-if="!fyIsShow" @click="fyClickHandle" class="group_item_main_desc_fy">翻译原文</a>
				</p>
				<div v-if="fyIsShow" class="group_item_main_desc_fy_content">{{fyedContent}}</div>
				<!--a href="javascript:;" class="group_item_main_desc_morecomment">
					<b>全部{{item.commentcount}}条评论</b>
				</a-->
			</div>
			<GroupsTools v-if="item.typeId && item.typeId !== '10003'" @setFeedsDataIsCollect="setFeedsDataIsCollect" @DelFeedsDataIsGoods="DelFeedsDataIsGoods" @setDialogAndShow="setDialogAndShow" @setFeedsDataIsGoods="setFeedsDataIsGoods" :item="item" :index="index" :currentImgDian="currentImgDian" :isgoods="isgoods" :isCollect="isCollect"></GroupsTools>
			<div class="group_item_main_goodsuser" v-if="item.goodusers && item.goodusers.length>0">
				<span>点赞过的人:</span>
				<span v-for="(user, userindex) in item.goodusers">
					<label>
						<a href="javascript:;" v-if="user.gooduser_name !== currentUser.name" :data-name="user.gooduser_name" :data-id="user.gooduser_id" @click="followClickHandle">{{user.gooduser_name !== currentUser.name ? user.gooduser_name.length>10 ? user.gooduser_name.substr(0, 10)+"..." : user.gooduser_name : '我' }}</a>
						<span v-else>我</span>
						<i v-if="userindex+1<item.goodusers.length">、</i>
					</label>
				</span>
			</div>
		</div>
		<Dialog :isShowDialog="isShowDialog" :className="dialogClassName">
			<GroupsDialogTip @dialogCloseHandle="dialogCloseHandle" slot="tip" v-if="dialogType === 'tip'" :content="dialogTip.content"></GroupsDialogTip>
			<GroupsDialogAlert @dialogCloseHandle="dialogCloseHandle" @dialogCallbackHandle="dialogCallbackHandle" slot="alert" v-if="dialogType === 'alert'" :content="dialogAlert.content"></GroupsDialogAlert>
			<GroupsDialogMore @dialogCloseHandle="dialogCloseHandle" :item="item" slot="moremenu" v-if="dialogType === 'more'" :isgoods='isgoods' @setFeedsDataIsGoods="setFeedsDataIsGoods" @DelFeedsDataIsGoods="DelFeedsDataIsGoods" @setDialogAndShow="setDialogAndShow" @getSourceNews="getSourceNewsHandle"></GroupsDialogMore>
			<GroupsDialogShare @dialogCloseHandle="dialogCloseHandle" slot="share" v-if="dialogType === 'share'" :item="item"></GroupsDialogShare>
		</Dialog>
	</div>
</template>
<script>
	const Cookie = window.Cookie();
	Array.prototype.hasIn = function(fn){
		var bool = false;
		for (var i=0;i<this.length;i++){
			var r = fn(this[i], i, this[i])
			if (r === true) {
				return r;
				break;
			}
		}
		return bool;
	}
	import Axios from "axios";
	import qs from "Qs";
	export default{
		name: "groupsitem",
		data: function(){
			return {
				screenWidth:0,
				currentImgDian:{id:-1, cv:-1},
				isgoods: false,
				isCollect: false,
				dialogClassName:'zoomIn',
				dialogType:"more",
				isShowDialog: false,
				currentUser: {
					name:'',
					id: 0
				},
				fyedContent:"",
				fyIsShow: false,
				dialogAlert:{
					callback: function(){},
					content: ''
				},
				dialogTip:{
					content: ''
				},
				fontSize:25,
				moreContentButton: false
			}
		},
		props:["item", "index", "length", "isShowAll", "keys"],
		computed:{
			title:function(){
				return this.$props.item.title.replace(/(quot;)/gim, "");
			},
			pubDate:function(){
				let day = window.dateFormat(new Date(this.$props.item.pubDate === 'null' ? this.$props.item.day : this.$props.item.pubDate).getTime());
					day = day.split('-');
				return day.join('-')
			},
			description:function(){
				let desc = this.$props.item.description.replace(/%3C\/?.+?%3E/gim, '').replace(/(\&nbsp\;|\&ldquo\;|\&rdquo\;|quot\;|\&middot\;|\&mdash\;|\&gt\;|\&times\;|\&hellip\;)/gim,"");
				/*this.$props.keys && $.each(this.$props.keys, (i, key) => {
					desc = desc.replace(new RegExp(key, "gim"), "${"+key+"}")
				});*/
				return desc
			},
			countProps:function(){
				let count = this.$props.item.countProps || 0;
				return count >99 ? '99+' : count;
			}
		},
		watch:{
			item:function(v){
				//console.log(v)
				this.$set(this, "fyIsShow", false);
				this.setIsGoodsValue(v, this.currentUser)
			}
		},
		mounted:function(){
			const that = this;
			that.$set(that, "screenWidth", screen.width);
			let userToken = Cookie.get('userToken');
			if (userToken){
				userToken = window.stringToJson(userToken, function(a){
					that.$set(that, "currentUser", a);
				});
				that.$nextTick(() => {
					that.setIsGoodsValue(that.$props.item, userToken)
					let height = $(".desc_" + that.$props.index).height();
					if (height>365){
						that.$set(that, "moreContentButton", true)
					}
					/*that.$nextTick(() => {
						let html = $(".desc_" + that.$props.index).html();
						html = html.replace(/\${([^{}]+)}/gim, function(a, b) {
							return "<b class='keyword'>" + b + "</b>"
						})
						$(".desc_" + that.$props.index).html(html)
					})*/
				});
			}
		},
		updated:function(){
			/*let html =$(".desc_"+this.$props.index).html();
			html = html.replace(/\${([^{}]+)}/gim, function(a, b){
				return "<b class='keyword'>"+b+"</b>"
			})
			$(".desc_"+this.$props.index).html(html)*/
		},
		components:{
			GroupsImgs: r => require.ensure([], () => r(require('../components/groupsimgs.vue')), 'groups_imgs'),
			GroupsTools: r => require.ensure([], () => r(require('../components/groupstools.vue')), 'groups_tools'),
			GroupsVideo: r => require.ensure([], () => r(require('../components/groupsvideo.vue')), 'groups_video'),
			Dialog: r => require.ensure([], () => r(require('../components/dialog.vue')), 'groups_dialog'),
			GroupsDialogTip: r => require.ensure([], () => r(require('../components/groupsdialogtip.vue')), 'groups_dialog_tip'),
			GroupsDialogAlert: r => require.ensure([], () => r(require('../components/groupsdialogalert.vue')), 'groups_dialog_alert'),
			GroupsDialogMore: r => require.ensure([], () => r(require('../components/groupsdialogmore.vue')), 'groups_dialog_moremenu'),
			GroupsDialogShare: r => require.ensure([], () => r(require('../components/groupsdialogshare.vue')), 'groups_dialog_share'),
		},
		methods:{
			moreContentButtonClickHandle(){
				this.$set(this, "moreContentButton", false);
			},
			fontSizeAddHandle(){
				let size = this.$data.fontSize+5;
				size >= 50 && (size = 50);
				this.$set(this, "fontSize", size)
			},
			fontSizeDelHandle(){
				let size = this.$data.fontSize-5;
				size <= 20 && (size = 20);
				this.$set(this, "fontSize", size)
			},
			fyClickHandle(){
				const that = this;
				Axios.post(this.$store.state.api.postFyContent, qs.stringify({
					key: this.$props.item.title+" "+this.$props.item.description.replace(/%3C\/?.+?%3E/gim, '').replace(/(&nbsp;)+/gim, '').replace(/(\s+)+/gim, '')
				})).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						that.$set(that, "fyedContent", res.data.data[0][0].tgt);
						that.$set(that, "fyIsShow", true);
					}else{

					}
				}).catch((err) => {

				})
			},
			headerGetSourceNewsHandle(){
				this.$router.push("/channel/"+this.$props.item.type)
			},
			getSourceNewsHandle(v){
				this.$emit("getSourceNews", v)
			},
			dialogCloseHandle(e){
				this.$set(this, "isShowDialog", false);
			},
			itemClickHandle(){
				let day = window.dateFormat(new Date(this.$props.item.pubDate === 'null' ? this.$props.item.day : this.$props.item.pubDate).getTime());
					day = day.split('-');
				this.$router.push("/view/"+this.$props.item.type+"/"+window.dateFormat(new Date(day).getTime())+"/"+this.$props.item.newsid)
			},
			followClickHandle(e){
				let id = $(e.target).attr("data-id"),
					name = $(e.target).attr("data-name");
				console.log(id)
				const that = this;
				const promise = new Promise((a,b) => {
					Axios.post(that.$store.state.api.isFollow, qs.stringify({
						ids:id,
						username: that.$data.currentUser.name,
						userid: that.$data.currentUser.id,
						email: that.$data.currentUser.email
					})).then((res) => {
						console.log(res)
						if (res.data.status === 0){
							a()
						}else{
							b()
						}
					}).catch((err) => {
						b(err)
					});
				});
				promise.then(() => {
					that.$set(that, "dialogAlert", {
						callback: function(){
							Axios.post(that.$store.state.api.postAddFollow, qs.stringify({
								followusername:name,
								followuserid:id,
								username: that.$data.currentUser.name,
								userid: that.$data.currentUser.id,
								email: that.$data.currentUser.email
							})).then((res) => {
								console.log(res)
								if (res.data.status === 1){
									that.$set(that, "dialogType", 'tip');
									that.$set(that, "dialogTip", {
										content:'关注成功'
									})
									that.$set(that, "isShowDialog", true);
								}else{
									that.$set(that, "dialogType", 'tip');
									that.$set(that, "dialogTip", {
										content:'不能重复关注！'
									})
									that.$set(that, "isShowDialog", true);
								}
							}).catch((err) => {
								that.$set(that, "dialogType", 'tip');
								that.$set(that, "dialogTip", {
									content:'关注出错，请稍候重试！'
								})
								that.$set(that, "isShowDialog", true);
							})
						},
						content: "是否要关注 "+name+" 他（她）？"
					});
					that.$set(that, "dialogType", 'alert');
					that.$set(that, "isShowDialog", true);
				}, (err) => {
					console.log(err)
					that.$set(that, "dialogType", 'tip');
					that.$set(that, "dialogTip", {
						content:err ? '关注出错，请稍候重试！' : '不能重复关注！'
					})
					that.$set(that, "isShowDialog", true);
				});
			},
			dialogCallbackHandle(){
				this.$data.dialogAlert.callback()
			},
			setIsGoodsValue(item, userToken){
				if (item && item.goodusers && item.goodusers.hasIn(function(b, i){
					const a = {
						gooduser_id: userToken.id,
						gooduser_name: userToken.name
					};
					if(b["gooduser_id"] === a["gooduser_id"] && b["gooduser_name"] === a["gooduser_name"]){
						return true
					}
				})){
					this.$set(this, "isgoods", true)
				}
			},
			dislogShowHandle(e){
				const index = e.target.getAttribute("data-index");
				this.$set(this, "dialogType", "more");
				this.$set(this, "dialogClassName", "zoomIn");
				this.$set(this, "isShowDialog", true);

			},
			setFeedsDataIsCollect(v){
				this.$set(this, "isCollect", true)
			},
			DelFeedsDataIsGoods(v, type){
				const that = this;
				const user = Cookie.get("userToken");
				if (user){
					Axios.post(this.$store.state.api.postDelGoods, qs.stringify({
						username:this.$data.currentUser.name,
						userid:this.$data.currentUser.id,
						type: type,
						id: v
					})).then((res) => {
						if (res.data.status === 1){
							that.$set(that, "isgoods", false);
							//that.$emit("getFeedsHandle");
						}else{

						}
					}).catch((err) => {

					})
				}else{
					this.$router.push('/signin')
				}
			},
			setFeedsDataIsGoods(v, type){
				const that = this;
				const user = Cookie.get("userToken");
				if (user){
					Axios.post(this.$store.state.api.postAddGoods, qs.stringify({
						username:this.$data.currentUser.name,
						userid:this.$data.currentUser.id,
						type: type,
						id: v
					})).then((res) => {
						if (res.data.status === 1){
							that.$set(that, "isgoods", true)
							//that.$emit("getFeedsHandle");
						}else{

						}
					}).catch((err) => {

					})
				}else{
					this.$router.push('/signin')
				}
			},
			setDialogAndShow(type, className, isShowDialog){
				this.$set(this, "dialogType", type);
				this.$set(this, "dialogClassName", className);
				this.$set(this, "isShowDialog", isShowDialog);
			},
			setGroupsImgsDian(cv, id){
				const that = this;
				that.$set(that, "currentImgDian", {id:id, cv:cv});
			},
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.group_item{
		.group_item_header{
			display: flex;
			padding:10/@base 10/@base 10/@base 20/@base;
			border-bottom:1/@base solid #e6e6e6;
			a{
				display:block;
				width:99%;
				text-decoration: none;
				color:#333;
				overflow: hidden;
				i{
					display: block;
				}
				&:last-child{
					width:24px;
					padding:0 10/@base;
					margin:14/@base 0 0;
				}
				&:first-child{
					width:90%;
					margin:5/@base 0 0;
					line-height: 40/@base;
					color:#999;
					display:flex;
					.group_item_header_img{
						width:32px;
						height:32px;
						border-radius: 32/@base;
						overflow:hidden;
						padding:1/@base;
						background-color: #efefef;
						i{
							margin:5/@base;
						}
					}
					.group_item_header_title{
						margin:0 0 0 10/@base;
						padding:5/@base 0;
						h1{
							font-size: 20/@base;
							font-weight: 400;
							padding:0;
							line-height: 24/@base;
						}
						p{
							font-size: 18/@base;
							color:#999;
							padding:0;
							line-height: 20/@base;
						}
					}
				}
			}
		}
		.group_item_main{
			.group_item_main_fontsize{
				display:flex;
				.group_item_main_fontsize_item{
					padding:20/@base 0;
					width:50%;
					height:40/@base;
					overflow: hidden;
					font-size: 20/@base;
					text-align: right;
					&:first-child{
						label{
							display: block;
							margin:0 10/@base 0 0;
							padding:5/@base 0;
							text-align: left;
							color:#999;
						}
					}
					&:last-child{
						display: flex;
						width:50%;
						label{
							width:63.33%;
							display: block;
							margin:0 10/@base 0 0;
							padding:5/@base 10/@base;
						}
						a{
							width:13.33%;
							display: block;
							text-align: center;
							text-decoration: none;
							color:#333;
							background-color: #efefef;
							margin:0 5/@base;
							font-size: 20/@base;
							padding:5/@base 10/@base;
							border-radius: 5/@base;
						}
					}
				}
			}
			.group_item_main_medias{
				position: relative;
				overflow: hidden;
				background-color: #efefef;
				.group_item_main_media{
				}
			}
			.group_item_main_goodsuser{
				padding:20/@base;
				font-size: 20/@base;
				overflow: hidden;
				span{
					display: inline-block;
					color:#999;
					label{
						display: inline-block;
						i{
							font-style: normal;
						}
						a{
							display: inline-block;
							margin:0 5/@base;
							text-decoration: none;
							color:#000;
						}
					}
				}
			}
			.group_item_main_desc{
				padding:20/@base;
				font-size: 20/@base;
				overflow: hidden;
				a{
					text-decoration: none;
					display: block;
					margin:10/@base 0;
					color:#333;
					h1{
						font-size: 26/@base;
						line-height: 36/@base;
						padding:0 0 20/@base 0;
						font-weight: 400;
						text-align: justify; 
						&.group_item_main_desc_title{
							font-size: 24/@base;
							i{
								font-style: normal;
								font-size: 20/@base;
								color:#ccc;
								font-weight: 400;
							}
						}
						&.group_item_main_desc_allshow_title{
							font-size: 26/@base;
							line-height: 46/@base;
							i{
								font-style: normal;
								font-size: 20/@base;
								color:#ccc;
								font-weight: 400;
							}
						}
					}
					p{
						i{
							font-style: normal;
							font-size: 20/@base;
							color:#ccc;
							font-weight: 400;
						}
						overflow: hidden;
						padding:10/@base 0;
						font-size: 24/@base;
						line-height: 40/@base;
						word-break:break-all;
						word-wrap: break-word;
						text-align: justify; 
						&.tipclick{
							color:#003569;
							font-size: 20/@base;
						}
					}
					&.group_item_main_desc_morecomment{
						color:#999;
					}
					&.group_item_main_desc_fy{
						color:#003569;
						display:inline-block;
						margin:0 10/@base 0 0;
					}
				}
				.group_item_main_desc_content{
					h1{
						font-size: 26/@base;
						line-height: 36/@base;
						padding:0 0 20/@base 0;
						font-weight: 400;
						text-align: justify; 
						&.group_item_main_desc_title{
							font-size: 24/@base;
							i{
								font-style: normal;
								font-size: 20/@base;
								color:#ccc;
								font-weight: 400;
							}
						}
						&.group_item_main_desc_allshow_title{
							font-size: 26/@base;
							line-height: 46/@base;
							i{
								font-style: normal;
								font-size: 20/@base;
								color:#ccc;
								font-weight: 400;
							}
						}
					}
					p{
						i{
							font-style: normal;
							font-size: 20/@base;
							color:#ccc;
							font-weight: 400;
						}
						overflow: hidden;
						padding:10/@base 0;
						font-size: 24/@base;
						line-height: 40/@base;
						word-break:break-all;
						word-wrap: break-word;
						text-align: justify; 
						&.tipclick{
							color:#003569;
							font-size: 20/@base;
						}
						&.show_all{
							padding:30/@base 0 60/@base 0;
						}
						&.group_item_main_desc_content_aside{
							color:#999;
							font-size: 20/@base;
							display:flex;
							span{
								width:50%;
								&:last-child{
									text-align: right;
								}
							}
						}
					}
					a{
						&.show_all{
							display: block;
							text-align: center;
							padding:20/@base;
							color:#999;
						}
					}
				}
				p{
					&.links{
						padding:10/@base 0;
					}
					&.pubdate{
						color:#ccc;
						display: flex;
						font-size: 20/@base;
						padding:10/@base 0;
						span{
							width:50%;
							&:last-child{
								text-align: right;
							}
						}
					}
				}
				.group_item_main_desc_fy_content{
					padding:10/@base 20/@base;
					font-size: 20/@base;
					line-height: 30/@base;
					border:1/@base solid #ccc;
					margin:0 0 20/@base 0;
					border-radius: 5/@base;
				}
			}
			.group_item_main_comment{
				margin:0 20/@base;
				b{
					display: block;
					&.group_item_main_comment_goodscount{
						font-size:20/@base;
					}
					&.group_item_main_comment_playscount{
						font-size:20/@base;
					}
				}
				a{
					text-decoration: none;
					color:#333;
				}
			}
		}
		b{
			&.keyword{
				color:#6495ed;
				margin:0 10/@base;
				font-weight: 400;
			}
		}
	}
</style>